<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			div{
				width:100px;
				height:100px;
				background: pink;
				border: 1px solid red;
				margin-bottom: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("input").click(function(){
					  //单个单词可以不用写引号       逗号
					$(".box1").animate({width:200,"border-width":4,},3000);//写在一起，同时执行
					$(".box1").animate({opacity:0.5},1000); //相同的元素，动画依次执行
					$(".box2").animate({width:200},1000);  //不同的元素，动画同时执行
					$(".box2").css("background","yellowgreen");  //非动画语句，将提前瞬间执行         背景颜色不能写动画
				});
			})
		</script>
	</head>
	<body>
		<input type="button" value="点我" />
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>
